window.addEventListener('load', function () {

    // 导航栏背景变色模块，三角形显示隐藏模块
    var mNavLi = document.querySelectorAll(".m-nav li");
    var triangle = document.querySelectorAll(".triangle");
    for (let i = 0; i < mNavLi.length; i++) {
        mNavLi[i].addEventListener('click',
            function () {
                for (let i = 0; i < mNavLi.length; i++) {
                    mNavLi[i].className = '';
                    triangle[i].style.display = 'none';
                }
                this.className = 'deepblack';
                let tri = this.querySelector('.triangle');
                tri.style.display = 'block';
            })
    }

    // 副导航栏变色模块
    var mSubtop = document.querySelectorAll('.m-subtop li em');
    for (let i = 0; i < mSubtop.length; i++) {
        mSubtop[i].addEventListener('click',
            function () {
                for (let i = 0; i < mSubtop.length; i++) {
                    mSubtop[i].className = '';

                }
                this.className = 'bg';

            })
    }


    // 焦点图js
    //获取元素
    var leftb = document.querySelector('.left');
    var rightb = document.querySelector('.right');
    var w = document.querySelector('.w');
    var box = document.querySelector('.box');
    var imgs = box.querySelector('.imgs');
    var imgt = imgs.querySelectorAll('li');
    //自动翻页函数
    var timeone = setInterval(function () {
        rightf();
    }, 4000);
    //左右按钮的出现
    w.addEventListener('mouseover', function () {
        leftb.style.display = 'block';
        rightb.style.display = 'block';
        //移入时清除定时器
        clearInterval(timeone);
        timeone = null;
    })

    //左右按钮的消失
    w.addEventListener('mouseout', function () {
        leftb.style.display = 'none';
        rightb.style.display = 'none';
        //恢复定时器
        clearInterval(timeone);
        timeone = setInterval(function () {
            rightf();
        }, 4000)
    })
    //动态生成小圆圈，小圈圈模块
    var list = box.querySelector('.list');
    for (var i = 0; i < imgs.children.length; i++) {
        //创建li，加入ul中
        var li = document.createElement('li');
        list.appendChild(li);
        //给小圈圈添加类名
        li.setAttribute('index', i);
        //排他思想，实现点击小圆圈，变色
        li.addEventListener('click', colors);
        //经过小圆圈，切换图片
        li.addEventListener('mouseenter', jump);
    }
    //一开始第二个亮
    list.children[1].className = 'change';
    //变色函数 
    function colors() {
        //把所有的小圆圈变白
        for (var i = 0; i < list.children.length; i++) {
            list.children[i].className = '';
        }
        //给图片对应的小圆圈上色
        var index = this.getAttribute('index');
        list.children[index].className = 'change';
    }
    //跳转函数
    function jump() {
        var index = this.getAttribute('index');
        var now = num.indexOf('two');
        //计算经过点与当前点的距离
        var dif = Math.max(index, now) - Math.min(index, now);
        // console.log(dis);
        if (index > now) {
            while (dif--) {
                rightf();
            }
        } else {
            while (dif--) {
                leftf();
            }
        }
    }
    //小圆圈跟随着图片移动
    var j = 1;

    function colort() {
        for (var i = 0; i < list.children.length; i++) {
            list.children[i].className = '';
        }
        if (j >= 6) {
            j = 0;
        } else if (j < 0) {
            j = 5;
        }
        list.children[j].className = 'change';
    }
    //翻页模块
    var num = ['one', 'two', 'three', 'four', 'five', 'six'];
    //右翻页
    rightb.addEventListener('click', limitclick(rightf, 1000));

    function limitclick(limitfn, limittime) {
        let timer;
        const realfn = function () {
            if (timer) {
                clearTimeout(timer);

            }
            timer = setTimeout(limitfn, limittime);
        }
        return realfn;

    }
    // function throttle(fn, wait) {
    //     var timer = null;
    //     return function () {
    //         var context = this;
    //         var args = arguments;
    //         if (!timer) {
    //             timer = setTimeout(function () {
    //                 fn.apply(context, args);
    //                 timer = null;
    //             }, wait)
    //         }
    //     }
    // }

    function rightf() {

        //把数组的最后一个添加到第一个
        num.unshift(num[5]);
        //删除最后一个
        num.pop();
        //重新给li添加类名
        for (var i = 0; i < num.length; i++) {
            imgt[i].setAttribute('class', num[i]);
        }
        //通过这个全局变量来让小圆圈的颜色一起变化
        j++;
        colort();

    }
    //左翻页
    leftb.addEventListener('click', limitclick(leftf, 1000))

    function leftf() {
        num.push(num[0]);
        num.shift();
        for (var i = 0; i < num.length; i++) {
            imgt[i].setAttribute('class', num[i]);
        }
        j--;
    }
    //点击图片实现翻页,通过在左右两边添加一个盒子来实现的
    var rights = document.querySelector('.rights');
    rights.addEventListener('click', function () {
        rightf();
    })
    var lefts = document.querySelector('.lefts');
    lefts.addEventListener('click', function () {
        leftf();
    })




    // 返回顶部的实现
    // 返回顶部动画函数过渡
    function animate(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            window.scroll(0, window.pageYOffset + step);
        }, 6);
    }

    var topBack = document.querySelector('.topback');
    window.addEventListener('scroll', function () {
        //当页面滚动过轮播图板块的时候，出现返回顶部的盒子
        if (window.pageYOffset >= w.offsetTop) {
            topBack.style.display = 'block';
        } else {
            topBack.style.display = 'none';
        }

    })
    //调用动画函数让点击返回顶部按钮之后滚动到页面最上方
    topBack.addEventListener('click', function () {
        animate(window, 0);
    })
    var play = document.querySelector('.play');
    var code = document.querySelector('.code');
    play.addEventListener('mouseover', function () {
        code.style.visibility = 'visible';
    })
    play.addEventListener('mouseout', function () {
        code.style.visibility = 'hidden';
    })

    // 播放条的设置
    // 播放条的设置
    var isDown = false;
    var beforeW = 0;
    var nowleftx = 0;
    var playSroll = true;
    var beforehi;
    var btnProgress = document.querySelector('.progress');

    function fn(event) {
        //现在盒子的width是现在盒子的百分比加之前盒子的百分比
        nowleftx = (event.clientX - beforex) / 458 * 100 + parseInt(beforehi);
        console.log(nowleftx);
        //如果滚动条的宽度超过了100或者滚动条宽度为负数，就将isDown变量变成false来停止滚动条宽度的变化
        if (parseInt(nowleftx) >= 100 && parseInt(nowleftx) < 0) {
            isDown = false;
        }
        if (parseInt(nowleftx) < 100 && parseInt(nowleftx) > 0 && isDown == true) {

            btnBox.style.width = nowleftx + '%';
        }


    }
    //点击滚动条之后可以改变currentTime和盒子宽度
    function btnBoxClick(event) {
        console.log('585858558');
        let eventtX = event.clientX;
        console.log(eventtX);
        let beforeX = btnProgress.getBoundingClientRect().left;
        console.log(beforeX);
        nowleftx = (eventtX - beforeX) / 458 * 100;
        console.log(nowleftx);
        if (parseInt(nowleftx) >= 100 && parseInt(nowleftx) < 0) {

        }
        if (parseInt(nowleftx) < 100 && parseInt(nowleftx) > 0) {

            btnBox.style.width = nowleftx + '%';
            audioObj.currentTime = nowleftx / 100 * (audioObj.duration);
        }

    }
    var btnBox = document.querySelector('.btn-box');
    //开始的时候最上层的盒子是btnProgress，后面因为btnBox宽度的变化，被红色覆盖的部分是btnBox，所以给btnBox也添加点击事件
    btnProgress.addEventListener('click', btnBoxClick);
    btnBox.addEventListener('click', btnBoxClick);
    console.log(btnProgress);
    var beforex = 0;

    var btn = btnBox.querySelector('.btn');
    //滚动条滚动的实现
    btn.addEventListener('mousedown', function (event) {
        window.addEventListener('mouseup', mUp);
        beforex = event.clientX;
        beforeW = btn.offsetLeft + 9;
        beforehi = btnBox.offsetWidth / 458 * 100;
        isDown = true;
        playSroll = false;
        //按下按钮之后给window添加mousemove让鼠标就算离开btn按钮也可以正常滑动
        window.addEventListener('mousemove', fn);

    })

    function mUp() {
        isDown = false;
        //鼠标弹起之后就改变currenttime，不在moousemove添加是因为会出现歌曲卡兹卡兹的倍速声音
        audioObj.currentTime = nowleftx / 100 * (audioObj.duration);
        playSroll = true;
        window.removeEventListener('mouseup', mUp);
    }





    // 播放条里面的开始暂停设置
    var y = 0;
    var start = document.querySelector('.player-btns .start');
    // 设置一个y来判断现在是暂停还是播放
    function startclick(play) {
        if (play == 1) {
            start.setAttribute('style', 'background-position:-40px -165px');
            audioObj.play();
            y = 1;
        } else {
            if (y % 2 == 0 || y == 0) {
                start.setAttribute('style', 'background-position:-40px -165px');
                audioObj.play();
            } else {
                start.setAttribute('style', 'background-position:-40px -204px');
                audioObj.pause();

            }
            y++;
        }
    }
    start.addEventListener('click', startclick);

    // 播放条里面的锁
    var x = 0;
    var open = false;
    var key = document.querySelector('.icon-key');
    key.addEventListener('click', function () {
        if (x % 2 == 0 || x == 0) {
            key.setAttribute('style', 'background-position:-80px -400px');
            open = true;
        } else {
            key.setAttribute('style', 'background-position:-100px -380px');
            open = false;
        }
        x++
    })

    var hand = document.querySelector('.hand');
    var player = document.querySelector('.m-player');
    //点击hand可以展开黑色播放列表
    hand.addEventListener('mouseout', function () {
        if (open == true) {
            player.setAttribute('style', 'top:-7px');
        }


    })
    //根据锁是否打开来实现播放条的出现或者消失
    var totalkey = document.querySelector('.key');
    totalkey.addEventListener('mouseout', function () {
        console.log(555);
        console.log(open);
        if (open == true) {
            player.setAttribute('style', 'top:-7px');
            console.log(222);
        }


    })
    player.addEventListener('mouseover', function () {
        if (open == true) {
            player.setAttribute('style', 'top:-53px');
        }


    })

    // ul轮播图
    // 鼠标移动入焦点图位置时两边箭头出现
    function animate2(obj, target, callback) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var step = (target - obj.offsetLeft) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
                callback && callback();
            }
            obj.style.left = obj.offsetLeft + step + 'px';
        }, 1);
    }
    var arrow_l = document.querySelector('.click-flag-l');
    var arrow_r = document.querySelector('.click-flag-r');
    var focus = document.querySelector('.roll-imgs');
    var focusUl = document.querySelector('.roll-imgs .roll-img1')
    var focusWidth = focusUl.offsetWidth;

    // 点击右箭头就向右移动
    var number = 0;
    arrow_r.addEventListener('click', function () {
        // 判断是否走到了最后一张复制的图片
        if (number == focus.children.length - 1) {
            focus.style.left = 0;
            number = 0;
        }
        number++;
        animate2(focus, -number * focusWidth);

    })

    // 左侧按钮
    arrow_l.addEventListener('click', function () {
        // 判断是否走到了第一张复制的图片
        if (number == 0) {
            number = focus.children.length - 1;
            focus.style.left = -number * focusWidth + 'px';

        }
        number--;
        animate2(focus, -number * focusWidth);
    })

    let xhr = new XMLHttpRequest;
    let focusRequest = new XMLHttpRequest;
    //ajax封装函数   
    //通过这个函数来获取到轮播图的图片 
    function focusImgway() {
        console.log(5555);
        let focusImg = JSON.parse(focusRequest.response);
        console.log(focusRequest.response);
        // console.log(focusImg);
        let art = focusImg.banners;
        for (let i = 0; i < focusImgAll.length; i++) {
            focusImgAll[i].src = art[i].imageUrl;
            console.log(art[i].imageUrl);
        }

    }

    function ajax(Requestname, requestWay, address, way, parameter) {

        Requestname.open(requestWay, 'http://localhost:3000' + address);
        if (requestWay == 'GET') {
            Requestname.send();
        } else {

            Requestname.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            Requestname.send(parameter);
        }
        Requestname.onreadystatechange = function () {
            if (Requestname.readyState === 4) {
                //  判断响应状态码 200 404 403 500
                if (Requestname.status >= 200 && Requestname.status < 300) {
                    // 处理结果
                    // let focusImg = JSON.parse(xhr.response);
                    // console.log(focusImg);
                    // let art = focusImg.banners;
                    // console.log(art[0].imageUrl);
                    // focusImgOne.src = art[0].imageUrl;
                    way();
                } else {
                    return Requestname.status;
                }
            }

        }

    }
    let focusImgOne = document.querySelector('#one');
    let focusImgAll = document.querySelectorAll('.w img');
    console.log(focusImgAll);
    ajax(focusRequest, 'GET', `/banner?t=${Date.now()}`, focusImgway);

    /*   // 用ajax获取轮播图的接口 没有用函数
    let focusImgOne = document.querySelector('#one');
    const xhr = new XMLHttpRequest();
    // 初始化 设置请求方法
    xhr.open('GET', 'http://localhost:3000/banner');
    // 发送
    xhr.send();
    // 事件绑定 处理服务端返回地结果
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            //  判断响应状态码 200 404 403 500
            // 2xx成功
            if (xhr.status >= 200 && xhr.status < 300) {
                // 处理结果
                let focusImg = JSON.parse(xhr.response);
                console.log(focusImg);
                let art = focusImg.banners;
                console.log(art[0].imageUrl);
                focusImgOne.src = art[0].imageUrl;


            }
        }

    }*/
    // 登陆页面的js
    let loginBox = document.querySelector('.m-tophead');
    let loading = document.querySelector('.loading');
    let body = document.querySelector('body');
    let loadingLink = document.querySelector('.m-tophead .link');
    console.log(loadingLink);
    loadingLink.addEventListener('click', function () {
        loading.classList.remove('loading-off');
        loading.classList.add('loading-open');
        body.classList.add('limit-srcoll');

    })
    let phone = document.querySelector('.top-phone');
    let tabCode = document.querySelector('.top-code');
    let phoneLine = document.querySelector('.tab-phone-line');
    let codeLine = document.querySelector('.tab-code-line');
    let loadingMiddle = document.querySelector('.loading-middle');
    let loadingMiddleCode = document.querySelector('.loading-middle-code');
    //这部分是在实现点击二维码登陆的切换
    phone.addEventListener('click', function () {
        phone.classList.add('loading-red');
        tabCode.classList.remove('loading-red');
        codeLine.classList.add('line-off');
        phoneLine.classList.remove('line-off');
        loadingMiddle.classList.remove('lm-middle-off');
        loadingMiddleCode.classList.add('lm-middle-off');
    })
    tabCode.addEventListener('click', function () {
        phone.classList.remove('loading-red');
        tabCode.classList.add('loading-red');
        codeLine.classList.remove('line-off');
        phoneLine.classList.add('line-off');
        loadingMiddle.classList.add('lm-middle-off');
        loadingMiddleCode.classList.remove('lm-middle-off');
    })
    // 眼睛设置用来切换密码是text还是password
    let eye = document.querySelector('.lm-middle .eye');
    let passWord = document.querySelector('.lm-middle input');
    let eyeI = 0;
    console.log(eye);
    eye.addEventListener('click', function () {

        if (eyeI % 2 == 0 || eyeI == 0) {
            eye.classList.remove('icon-yanjing_yincang');
            eye.classList.add('icon-yanjing_xianshi');
            passWord.setAttribute('type', 'text');
        } else {
            eye.classList.remove('icon-yanjing_xianshi');
            eye.classList.add('icon-yanjing_yincang');
            passWord.setAttribute('type', 'password');
        }
        eyeI++;

    })
    // 关闭登录窗口
    function loginclose() {
        loading.classList.remove('loading-open');
        loading.classList.add('loading-off');
        body.classList.remove('limit-srcoll');
        body.classList.add('free-srcoll');
    }
    let close = document.querySelector('.close');
    close.addEventListener('click', loginclose);
    //用户的信息：用户信息的盒子还有用户的头像
    let userJpg = document.querySelector('.m-tophead .userjpg');
    let userBox = document.querySelector('.userbox');
    userJpg.addEventListener('mouseover', function () {
        console.log(userBox);
        userBox.style.display = 'block';
    })
    userJpg.addEventListener('mouseout', function () {
        userBox.style.display = 'none';
    })
    userBox.addEventListener('mouseover', function () {
        userBox.style.display = 'block';
    })
    userBox.addEventListener('mouseout', function () {
        userBox.style.display = 'none';
    })
    // 点击登录按钮后开始发送请求
    //成功登陆后调用login函数 
    let loginRequest = new XMLHttpRequest;

    function login() {
        // 显示调用信息是否正确判断调用是否成功
        let loginMessage = JSON.parse(loginRequest.response);
        console.log(loginMessage);
        if (loginMessage.code >= 300 || loadingMiddleCode < 200) {
            verifyPsw.innerHTML = "*" + "密码/手机号码错误";
            verifyPsw.style.color = "#c72424c9";
            //如果调用这个接口状态码不正确，就删除刚刚添加进去的本地存储
            localStorage.removeItem('phone');
            localStorage.removeItem('password');
            localStorage.removeItem('t');
            localStorage.removeItem('cookie');

        } else {
            //将登陆的账号和密码存入本地存储中去 phoneNumber.value}&password=${phonePsw.value}&t=${Date.now()
            localStorage.setItem('cookie', encodeURIComponent(loginMessage.cookie));
            loginclose();
            loadingLink.classList.add('loading-off');
            userJpg.style.display = 'block';
            userJpg.src = loginMessage.profile.avatarUrl;
            loginBox.setAttribute('user-id', `${loginMessage.account.id}`);
            //登陆好了之后就可以调用补充个人信息函数
            selfpage();
        }
    }
    // 一进入页面就开始判断是否已经是登陆状态，实现七天周期免登陆
    let nowTime = Date.now();
    let limitTime = localStorage.getItem('t');
    if (localStorage.getItem('phone')) {
        if (nowTime <= parseInt(limitTime) + 604800000) {
            let phoneNumber = localStorage.getItem('phone');
            let phonePsw = localStorage.getItem('password');
            localStorage.getItem('password');
            let msg = `phone=${phoneNumber}&password=${phonePsw}&t=${Date.now()}`
            ajax(loginRequest, 'POST', `/login/cellphone`, login, msg);


        } else {
            localStorage.removeItem('phone');
            localStorage.removeItem('password');
            localStorage.removeItem('t');
            loginBox.removeAttribute('user-id');
        }
    }
    localStorage.getItem('phone');
    localStorage.getItem('password');
    let loginBtn = document.querySelector('.lm-botton');
    let phonePsw = document.querySelector('.lm-middle .psw');
    let verify = this.document.querySelector('.verify');
    let verifyPsw = this.document.querySelector('.verify-psw');
    let phoneNumber = document.querySelector('.lm-top-right .phone-number');

    // 复选框
    let check = document.querySelector('.check');
    let disagree = document.querySelector('.disagree');
    loginBtn.addEventListener('click', function () {
        let logintimer;
        if (logintimer) {
            clearTimeout(logintimer);
        }
        //点击的时候先清空之前的密码和手机号
        verify.innerHTML = '';
        verifyPsw.innerHTML = '';
        // 如果复选框没有被选中，无法发送请求
        if (check.checked) {
            if (phoneNumber.value == "" || phoneNumber.value == null) {
                verify.innerHTML = "*" + "不能为空";
                verify.style.color = "#c72424c9";
                return false;



            } else if (phonePsw.value == "" || phonePsw.value == null) {
                verifyPsw.innerHTML = "*" + "不能为空";
                verifyPsw.style.color = "#c72424c9";
                return false;

            } else {
                let reg = /^1[3456789]\d{9}$/;
                if (reg.test(phoneNumber.value)) {
                    let phoneNumberValue = phoneNumber.value;
                    let phonePswValue = phonePsw.value;
                    let msg = `phone=${phoneNumberValue}&password=${phonePswValue}&t=${Date.now()}`
                    localStorage.setItem('phone', phoneNumber.value);
                    localStorage.setItem('password', phonePsw.value);
                    localStorage.setItem('t', Date.now());
                    ajax(loginRequest, 'POST', `/login/cellphone`, login, msg);


                } else {
                    verify.innerHTML = "*" + "手机号码格式不正确";
                    verify.style.color = "#c72424c9";
                    return false;
                }
            }

        } else {

            disagree.classList.remove('loading-off');
            disagree.classList.add('disagree-move');
        }
        logintimer = setTimeout(function () {
            disagree.classList.remove('disagree-move');
            disagree.classList.add('loading-off');
        }, 1000)


    })
    var commendRequest = new XMLHttpRequest;
    var songListRequest = new XMLHttpRequest;
    let commendBtn = document.querySelectorAll('.top-main-news .img-buttom-r');
    var songSrc = new XMLHttpRequest;
    var audioObj = new Audio(`#`);
    let songNext = document.querySelector('.player-btns .next');
    let songLast = document.querySelector('.player-btns .last');
    let playerImg = document.querySelector('.player-img img');
    var songPlayNumber = 0;
    // audioObj.autoPlay = true //设置为自动播放，下次更换 audioObject.src 后会自动播放音乐
    //用这个函数改变songPlayNumber实现歌曲的下一首播放
    function playNext() {
        console.log(5);
        if (songPlayNumber >= songId.length - 1) {
            songPlayNumber = 0;
            songplay();
        } else {
            songPlayNumber++;
            songplay();
        }
        ajax(songSrc, 'GET', `/song/url?id=${songId[songPlayNumber]}&t=${Date.now()}`, songplay);
    }
    //当当前音乐播放结束之后就播放下一首
    audioObj.addEventListener('ended', playNext);
    //获取歌单里面的歌曲开始播放,这里通过全局变量songPlayNumber来实现上一首或者下一首
    songNext.addEventListener('click', playNext)
    songLast.addEventListener('click', function () {
        console.log(10);
        if (songPlayNumber <= 0) {
            songPlayNumber = songId.length - 1;
            songplay();

        } else {
            songPlayNumber--;
            songplay();
        }
        ajax(songSrc, 'GET', `/song/url?id=${songId[songPlayNumber]}&t=${Date.now()}`, songplay);

    })
    let songName = document.querySelector('.g-player .m-player .content .player-line .song-name .name');
    let singer = document.querySelector('.g-player .m-player .content .player-line .song-name .singer');
    let songLength = document.querySelector('.g-player .m-player .content .player-line .line .time .song-length');
    var songMp3IdRequest = new XMLHttpRequest;
    let focusImgAllLink = document.querySelectorAll('.top-main .top-main-news li .news-a .jump');
    var songListLinkRequest = new XMLHttpRequest;
    var songId = new Array;
    //将歌曲的src放到audiObj中去
    function songplay() {
        var songMp3 = JSON.parse(songSrc.response);
        console.log(songMp3);
        // 最开始点击的时候=0
        audioObj.src = `${songMp3.data[0].url}`;
        var songMp3Id = songMp3.data[0].id;
        // 歌单里面的歌曲信息导入
        function songMessage() {
            //点击歌单中的li实现样式变化
            playlay();
            //同步歌词和歌曲
            lycSameTime();
            // 把当前正在播放的这首歌的图片信息放到播放条里面
            var songMsg = JSON.parse(songMp3IdRequest.response);
            console.log(songMsg);
            console.log('sha');
            playerImg.src = songMsg.songs[0].al.picUrl;
            songName.innerHTML = songMsg.songs[0].name;
            singer.innerHTML = songMsg.songs[0].ar[0].name;
            //歌曲时长的获取
            let minute = Math.trunc(Math.trunc((songMsg.songs[0].dt) / 1000) / 60);
            let second = Math.trunc((songMsg.songs[0].dt) / 1000) % 60;
            if (minute >= 10) {
                minute = Math.trunc(Math.trunc((songMsg.songs[0].dt) / 1000) / 60);
            } else {
                minute = '0' + minute;
            }
            if (second >= 10) {
                second = Math.trunc((songMsg.songs[0].dt) / 1000) % 60;
            } else {
                second = '0' + second;
            }
            songLength.innerHTML = `/ ${minute}:${second}`;
            // 开始播放之后播放按钮变成开始
            startclick(1);

        }
        //调用歌曲信息函数
        ajax(songMp3IdRequest, 'GET', `/song/detail?ids=${songMp3Id}&t=${Date.now()}`, songMessage);






    }
    let subSongList = document.querySelector('.gsb-left ul');
    // 获取歌单里面的歌曲
    function songList() {

        var song = JSON.parse(songListRequest.response);
        console.log(song);

        for (let i = 0; i < song.songs.length; i++) {
            //给小歌单添加歌曲元素
            let subSongListLi = document.createElement('li');
            subSongList.appendChild(subSongListLi);
            subSongListLi.setAttribute('song-id', `${song.songs[i].id}`);
            for (let j = 0; j < 3; j++) {
                let subSongListSpan = document.createElement('span');
                subSongListLi.appendChild(subSongListSpan);
                if (j == 0) {
                    subSongListSpan.classList.add('left-songname');
                    subSongListSpan.innerHTML = `${song.songs[i].name}`;
                }
                if (j == 1) {
                    subSongListSpan.classList.add('left-singer');
                    subSongListSpan.innerHTML = `${song.songs[i].ar[0].name}`;
                }
                if (j == 2) {
                    subSongListSpan.classList.add('left-time');
                    //歌曲时长的获取
                    let minute = Math.trunc(Math.trunc((song.songs[i].dt) / 1000) / 60);
                    let second = Math.trunc((song.songs[i].dt) / 1000) % 60;
                    if (minute >= 10) {
                        minute = Math.trunc(Math.trunc((song.songs[i].dt) / 1000) / 60);
                    } else {
                        minute = '0' + minute;
                    }
                    if (second >= 10) {
                        second = Math.trunc((song.songs[i].dt) / 1000) % 60;
                    } else {
                        second = '0' + second;
                    }
                    subSongListSpan.innerHTML = `${minute}:${second}`;
                }
            }
            songId.push(`${song.songs[i].id}`);
            console.log(songId);
        }
        ajax(songSrc, 'GET', `/song/url?id=${songId[0]}&t=${Date.now()}`, songplay);
    }
    //给首页上的歌单照片渲染，给按钮添加点击之后调用接口，获取歌单信息
    ajax(commendRequest, 'GET', `/personalized?limit=8&t=${Date.now()}`, hotCommend);

    /* function songListf() {
         console.log(songListLinkRequest.response);
         console.log(zjm);
     }
     console.log(songListLinkRequest.response);*/
    let topSongList = document.querySelectorAll('.top-main-news li');

    function hotCommend() {
        var Message = JSON.parse(commendRequest.response);
        console.log(Message);
        console.log('hello');
        let img = document.querySelectorAll('.top-main-news li div img');
        let text = document.querySelectorAll('.top-main-news li p');
        let playCount = document.querySelectorAll('.top-main-news li div div .img-buttom-m');
        for (let i = 0; i < img.length; i++) {
            //改变图片
            topSongList[i].setAttribute('songlist-id', `${Message.result[i].id}`);
            img[i].src = Message.result[i].picUrl;
            text[i].innerHTML = Message.result[i].name;
            playCount[i].innerHTML = Math.trunc((Message.result[i].playCount) / 10000) + '万';
        }
        for (let i = 0; i < commendBtn.length; i++) {
            commendBtn[i].addEventListener('click', function () {
                ajax(songListRequest, 'GET', `/playlist/track/all?id=${Message.result[i].id}&limit=10&offset=0&t=${Date.now()}`, songList);

            })
            /* focusImgAllLink.addEventListener('click', function () {
                 ajax(songListLinkRequest, 'GET', `/playlist/detail?id=${Message.result[i].id}&t=${Date.now()}`, songListf);
             })*/


        }
        console.log(img);
        console.log(Message);
    }
    //退出登陆模块
    //如果退出登陆，也要再本地存储里面去掉信息
    let outRequest = new XMLHttpRequest;

    function outF() {
        localStorage.removeItem('phone');
        localStorage.removeItem('password');
        localStorage.removeItem('t');
        localStorage.removeItem('cookie');
        loginclose();
        loadingLink.classList.remove('loading-off');
        userJpg.style.display = 'none';
        userBox.style.display = 'none';
    }
    let out = document.querySelector('.self-out');
    out.addEventListener('click', function () {
        ajax(outRequest, 'GET', `/logout?t=${Date.now()}`, outF);
    })
    // 歌曲时间显示 
    let count = 0;
    let timeNUm = 0;
    audioObj.ontimeupdate = function () {
        // 获取全长音乐
        if (playSroll == true) {



            let allTime = Math.trunc(audioObj.duration);
            let songTime = document.querySelector('.song-time');
            let i = Math.trunc(audioObj.currentTime);
            let Ctime = audioObj.currentTime;
            btnBox.style.width = (Ctime / allTime * 100) + '%';
            nowleftx = (Ctime / allTime * 100) + '%';
            if (i < 60) {
                if (i < 10) {
                    songTime.innerHTML = `00:0${i}`;
                } else {
                    songTime.innerHTML = `00:${i}`
                }
            } else {
                let min = Math.trunc(i / 60);
                let second = i % 60;
                if (min < 10) {
                    if (second < 10) {
                        songTime.innerHTML = `0${min}:0${second}`;
                    } else {
                        songTime.innerHTML = `0${min}:${second}`;
                    }
                } else {
                    if (second < 10) {
                        songTime.innerHTML = `${min}:0${second}`;
                    } else {
                        songTime.innerHTML = `${min}:${second}`;
                    }


                }

            }
            //每调用一次歌词就清除一次时间数组
            if (lycChange == false) {
                lycSameTime();
                timeNUm = 0;
                console.log('343434');
                lycChange = true;

            } else {
                for (timeNUm = 0; timeNUm < lycTimeAll.length - 1; timeNUm++) {
                    let ul = document.querySelector('.gsb-right ul');
                    let div = document.querySelector('.gsb-right');
                    let time = audioObj.currentTime;
                    console.log(lycTimeAll);
                    // console.log(lycTimeAll[0]);
                    //通过时间数组来计算句歌词对应的事件
                    let lycnow = parseFloat(lycTimeAll[timeNUm].split(':')[0] * 60) + parseFloat(lycTimeAll[timeNUm].split(':')[1]);
                    let lycnow2 = parseFloat(lycTimeAll[timeNUm + 1].split(':')[0] * 60) + parseFloat((lycTimeAll[timeNUm + 1].split(':'))[1]);
                    console.log(lycTimeAll[timeNUm + 1].split(':')[0] * 60);
                    console.log(lycnow);
                    console.log(lycnow2);
                    if (time >= lycnow && time < lycnow2) {
                        let li = document.querySelectorAll('.gsb-right ul li');
                        // console.log(li);
                        // ul.style.top = 112 - 27 * timeNUm + 'px';
                        div.scrollTop = 26 * timeNUm;
                        console.log(timeNUm);
                        console.log(div.scrollTop);
                        for (let i = 0; i < li.length; i++) {
                            li[i].classList.remove('playlyc');
                        }
                        //  console.log(li);
                        li[timeNUm].classList.add('playlyc');
                        break;

                    }
                    console.log(audioObj.currentTime);
                }
            }

        }

    }
    //获取iframe里面的元素
    let ifSong = document.getElementById('ifSong').contentWindow;
    let btnbtn = ifSong.document.querySelector('.btn-play');
    let miImg = ifSong.document.querySelector('.mi-img img');
    let textTop = ifSong.document.querySelector('.text-top h2');
    let lbSongImg = ifSong.document.querySelectorAll('.lb-song ul li img');
    let lbSongI = ifSong.document.querySelectorAll('.lb-song ul li i');
    let lbSongSpan = ifSong.document.querySelectorAll('.lb-song ul li span');
    let lsdSongName = ifSong.document.querySelector('.lb-song-detail .lsd-songname');
    let lsdSinger = ifSong.document.querySelector('.lb-song-detail .lsd-singer');
    let lsdLyc = ifSong.document.querySelector('.lb-song-detail .lsd-lyc');
    console.log(lbSongImg);
    console.log('543');
    let brief = ifSong.document.querySelector('.brief');
    // 歌单页面里面的歌曲li
    let lbSong = ifSong.document.querySelectorAll('.lb-song ul li');
    console.log(lbSong);
    console.log('sheif');
    let backPage = ifSong.document.querySelector('.list-top .icon-zuohua');
    let backPageA = ifSong.document.querySelector('.list-top .t-text');

    // 点击按钮之后通过隐藏主页面和盒子和现实iframe页面来实现切换页面
    backPage.addEventListener('click', function () {
        totalmiddle.classList.remove('index');
        iframeone.classList.remove('otherpage');
    })
    backPageA.addEventListener('click', function () {
        totalmiddle.classList.remove('index');
        iframeone.classList.remove('otherpage');
    })
    console.log(btnbtn);
    btnbtn.addEventListener('click', function () {
        console.log('successs');
    })
    //获取歌单详细信息调用函数
    var songListIdRequest = new XMLHttpRequest;
    var songLyricRequest = new XMLHttpRequest;
    let lsdLycUL = document.createElement('ul');
    lsdLyc.appendChild(lsdLycUL);
    //将获取的歌词拆分成一句一句放进页面中
    function lyric() {
        let songLyric = JSON.parse(songLyricRequest.response);
        console.log(songLyric);
        //用回车拆分成数组
        let lrcs = songLyric.lrc.lyric.split('\n');
        //用[]拆分事件和歌词
        //最后一个元素是分号，做出来是undefined，这个元素直接删除
        for (let i = 0; i < lrcs.length - 1; i++) {
            let lycA = lrcs[i].split(']');
            console.log(lycA[1]);
            let lycli = document.createElement('li');
            lsdLycUL.appendChild(lycli);
            if (lycA[1] == undefined) {
                lycli.innerHTML = lrcs[i];
            } else {
                lycli.innerHTML = lycA[1];
            }

        }


    }
    //把歌单图片信息渲染进页面
    function changeMessage() {
        var changeResponse = JSON.parse(songListIdRequest.response);
        console.log(changeResponse);
        miImg.src = changeResponse.playlist.coverImgUrl;
        textTop.innerHTML = changeResponse.playlist.name;
        brief.innerHTML = '介绍：' + changeResponse.playlist.description;
        console.log('zjm');
        lsdSongName.innerHTML = changeResponse.playlist.tracks[0].name;
        lsdSinger.innerHTML = changeResponse.playlist.tracks[0].ar[0].name;
        //获取歌词信息
        let songLyricId = changeResponse.playlist.tracks[0].id;
        ajax(songLyricRequest, 'GET', `/lyric?id=${songLyricId}&t=${Date.now()}`, lyric);
        // 将每首歌的图片和名字渲染入页面
        for (let i = 0; i < lbSong.length; i++) {
            //渲染歌单歌曲名字和图片
            lbSong[i].setAttribute('song-id', `${changeResponse.playlist.tracks[i].id}`);
            lbSongImg[i].src = changeResponse.playlist.tracks[i].al.picUrl;
            lbSongSpan[i].innerHTML = changeResponse.playlist.tracks[i].name;
            //点击的时候改变歌词内容
            lbSong[i].addEventListener('click', function () {
                lsdSongName.innerHTML = changeResponse.playlist.tracks[i].name;
                lsdSinger.innerHTML = changeResponse.playlist.tracks[i].ar[0].name;
                //先删除原有歌词的li节点
                let lycAll = lsdLycUL.querySelectorAll('li');
                for (let i = 0; i < lycAll.length; i++) {
                    lsdLycUL.removeChild(lycAll[i]);

                }

                console.log('jame');
                let songLyricId = changeResponse.playlist.tracks[i].id;
                ajax(songLyricRequest, 'GET', `/lyric?id=${songLyricId}&t=${Date.now()}`, lyric);
                for (let i = 0; i < lbSong.length; i++) {
                    lbSong[i].classList.remove('lb-click');
                }
                lbSong[i].classList.add('lb-click');
                //获取id
                let newid = lbSong[i].getAttribute('song-id');
                commentMsg(newid, 0);

            })
        }
        now();

    }
    // 点击图片的时候改变框架 并且将hotcommd函数获取到的Message（歌单信息）传入
    let jumpImg = document.querySelectorAll('ul li .news-a img');
    console.log(jumpImg);
    console.log(151515);
    let totalmiddle = document.querySelector('.totalmiddle');
    let iframeone = document.getElementById('ifSong');
    for (let i = 0; i < jumpImg.length; i++) {
        jumpImg[i].addEventListener('click', function () {
            Message = JSON.parse(commendRequest.response);
            totalmiddle.classList.add('index');
            iframeone.classList.add('otherpage');
            //根据歌单id获取歌单详细信息
            let songListId = Message.result[i].id;
            console.log(songListId);
            ajax(songListIdRequest, 'GET', `/playlist/detail?id=${songListId}&t=${Date.now()}`, changeMessage);
            console.log(454545);
        })
    }
    let subPlayer = document.querySelector('.g-subplayer');
    let gsClose = document.querySelector('.gs-close');
    let playerList = document.querySelector('.player-ctrl .list');
    playerList.addEventListener('click', function () {
        subPlayer.classList.remove('done');
    })
    gsClose.addEventListener('click', function () {
        subPlayer.classList.add('done');
    })
    //songPlayNumber根据这个全局变量的变化来改变小歌单里面li的效果变化
    function playlay() {
        var playlaytimer;
        clearTimeout(playlaytimer);
        let subList = document.querySelectorAll('.gsb-left ul li');
        for (let i = 0; i < subList.length; i++) {
            subList[i].classList.remove('change');
            // 如果点击这个li就变换效果并且播放这个li对应的音乐
            subList[i].addEventListener('click', function () {
                for (let i = 0; i < subList.length; i++) {
                    subList[i].classList.remove('change');
                }
                subList[i].classList.add('change');
                songPlayNumber = i;
                let id = subList[i].getAttribute('song-id');
                ajax(songSrc, 'GET', `/song/url?id=${id}&t=${Date.now()}`, songplay);
            })
        }


        console.log(subList);
        subList[songPlayNumber].classList.add('change');
        playlaytimer = setTimeout(subSongName, 1000);


    }
    //实现歌词和歌曲同步       
    //new一个数组来装时间
    let lycTimeAll = new Array;
    var lycChange = false; //用来判断现在是否换歌词了
    function lycSameTime() {

        let subLi = document.querySelector('.gsb-right');
        if (subLi.children.length != 0) {
            let before = document.querySelector('.gsb-right ul');
            subLi.removeChild(before);
            lycTimeAll.length = 0;
            lycChange = false;
        }

        let subList = document.querySelectorAll('.gsb-left ul li');

        let subul = document.createElement('ul');
        subLi.appendChild(subul);
        //获得当前正在播放的歌曲的id
        let id = subList[songPlayNumber].getAttribute('song-id');
        let lycS = new XMLHttpRequest;
        ajax(lycS, 'GET', `/lyric?id=${id}&t=${Date.now()}`, function () {
            let songLyric = JSON.parse(lycS.response);
            console.log(songLyric);
            //用回车拆分成数组
            let lrcs = songLyric.lrc.lyric.split('\n');
            //用[]拆分事件和歌词
            //最后一个元素是分号，做出来是undefined，这个元素直接删除


            for (let i = 0; i < lrcs.length - 1; i++) {
                let lycA = lrcs[i].split(']');
                console.log(lycA[1]);
                console.log(lycA[0]);

                let lycli = document.createElement('li');
                subul.appendChild(lycli);
                if (lycA[1] == undefined) {
                    lycli.innerHTML = lrcs[i];
                } else {
                    lycli.innerHTML = lycA[1];
                    let lyctime = (lycA[0].split('['))[1];
                    lycTimeAll.push(lyctime);

                }

            }

        });


    }
    for (let i = 0; i < lbSongImg.length; i++) {
        //给歌单里面播放歌曲
        //点击跳转的歌单页面的图片，就在黑色副歌单里面创建属于这个歌的li
        lbSongImg[i].addEventListener('click', function () {
            console.log(89898989);

            for (let i = 0; i < lbSongI.length; i++) {
                lbSongI[i].classList.add('done');

            }
            lbSongI[i].classList.remove('done');
            //遍历函数判断是否有这个歌曲，如果有这个歌曲直接再歌单里面播放
            let lbsongId = lbSong[i].getAttribute('song-id');
            let judge = 0;
            for (let i = 0; i < songId.length; i++) {
                if (lbsongId == songId[i]) {
                    console.log('jijijwe');
                    judge = 1;
                    let id = lbSong[i].getAttribute('song-id');
                    songPlayNumber = i;
                    playlay();

                    ajax(songSrc, 'GET', `/song/url?id=${id}&t=${Date.now()}`, songplay);

                }
            }
            //如果歌单中没有这首歌，就将歌曲放进黑色歌单中，同时播放
            if (judge == 0) {
                songId.push(`${lbsongId}`);
                songPlayNumber = songId.length - 1;
                console.log(songId);
                ajax(songMp3IdRequest, 'GET', `/song/detail?ids=${lbsongId}&t=${Date.now()}`, function () {
                    let song = JSON.parse(songMp3IdRequest.response);
                    console.log(777777777);
                    //在黑色歌单里面再创建新的li元素，里面填入这首歌的信息
                    let subSongListLi = document.createElement('li');
                    subSongList.appendChild(subSongListLi);
                    subSongListLi.setAttribute('song-id', `${lbsongId}`);
                    for (let j = 0; j < 3; j++) {
                        let subSongListSpan = document.createElement('span');
                        subSongListLi.appendChild(subSongListSpan);
                        if (j == 0) {
                            subSongListSpan.classList.add('left-songname');
                            subSongListSpan.innerHTML = `${song.songs[0].name}`;
                        }
                        if (j == 1) {
                            subSongListSpan.classList.add('left-singer');
                            subSongListSpan.innerHTML = `${song.songs[0].ar[0].name}`;
                        }
                        if (j == 2) {
                            subSongListSpan.classList.add('left-time');
                            //歌曲时长的获取
                            let minute = Math.trunc(Math.trunc((song.songs[0].dt) / 1000) / 60);
                            let second = Math.trunc((song.songs[0].dt) / 1000) % 60;
                            if (minute >= 10) {
                                minute = Math.trunc(Math.trunc((songMsg.songs[0].dt) / 1000) / 60);
                            } else {
                                minute = '0' + minute;
                            }
                            if (second >= 10) {
                                second = Math.trunc((song.songs[0].dt) / 1000) % 60;
                            } else {
                                second = '0' + second;
                            }
                            subSongListSpan.innerHTML = `${minute}:${second}`;
                        }
                    }
                    playlay();
                    ajax(songSrc, 'GET', `/song/url?id=${lbsongId}&t=${Date.now()}`, songplay);
                });
            }


        })

    }
    let ifAll = document.querySelectorAll('iframe');
    mNavLi[0].addEventListener('click', function () {
        for (let i = 0; i < ifAll.length; i++) {
            ifAll[i].classList.add('index');
        }
        totalmiddle.classList.remove('index');
        ifsuccess.classList.remove('otherpage-third');
        iferror.classList.remove('otherpage-second');
        ifAll[4].classList.remove('other-search');
    })
    //获取第二个页面元素
    let iferror = document.querySelector('#iferror');
    //获取第三个页面元素
    let ifsuccess = document.querySelector('#ifsuccess');
    //给我的音乐里面添加点击事件
    mNavLi[1].addEventListener('click', function () {
        //如果本地存储里面没有手机信息，说明现在还不是登陆状态
        //显示为登陆状态页面
        if (localStorage.getItem('phone') != null) {
            totalmiddle.classList.add('index');
            ifsuccess.classList.add('otherpage-third');
            ifperson.classList.remove('otherpage-four');

        } else {
            totalmiddle.classList.add('index');
            iferror.classList.add('otherpage-second');

        }
    })
    let selfsrc = document.querySelector('.user-top .self-page');
    selfsrc.addEventListener('click', function () {
        for (let i = 0; i < mNavLi.length; i++) {
            mNavLi[i].className = '';
            triangle[i].style.display = 'none';
        }
        mNavLi[1].className = 'deepblack';
        triangle[1].style.display = 'block';
        //如果本地存储里面没有手机信息，说明现在还不是登陆状态
        //显示为登陆状态页面
        if (localStorage.getItem('phone') != null) {
            totalmiddle.classList.add('index');
            ifsuccess.classList.add('otherpage-third');
            ifperson.classList.remove('otherpage-four');

        } else {
            totalmiddle.classList.add('index');
            iferror.classList.add('otherpage-second');

        }
    })

    //要获取个人信息页面啊里面的元素
    let ifSuccess = document.getElementById('ifsuccess').contentWindow;
    let peopleImg = ifSuccess.document.querySelector('.box-left img');
    let peopleName = ifSuccess.document.querySelector('.r-top .rt-name');
    let eventCount = ifSuccess.document.querySelector('.rm-box .event-count');
    let focusNum = ifSuccess.document.querySelector('.rm-box .focus-number');
    let follow = ifSuccess.document.querySelector('.rm-box .follow');
    let signature = ifSuccess.document.querySelector('.r-bottom .signature');
    // 个人信息完善
    let songRankLi = ifSuccess.document.querySelectorAll('.listenlist .list-middle ul li');
    let songRankName = ifSuccess.document.querySelectorAll('.listenlist .list-middle ul li .songname');
    let singerRankName = ifSuccess.document.querySelectorAll('.listenlist .list-middle ul li .singername');
    //获取歌单元素
    let ltsub = ifSuccess.document.querySelector('.createlist .lt-left .lt-subtitle');
    let ltsub2 = ifSuccess.document.querySelector('.createlist2 .lt-left .lt-subtitle');
    let cookie = localStorage.getItem('cookie');
    //用户主页个人中心信息
    function selfpage() {
        let peopleId = loginBox.getAttribute('user-id');
        let peopleMsg = new XMLHttpRequest;
        let listenList = new XMLHttpRequest;
        let songRank = new XMLHttpRequest;
        let songRankList = new XMLHttpRequest;


        //根据用户id调用接口来填充用户的个性签名、头像
        ajax(peopleMsg, 'GET', `/user/detail?uid=${peopleId}&t=${Date.now()}`, function () {
            let Msg = JSON.parse(peopleMsg.response);
            peopleImg.src = Msg.profile.avatarUrl;
            peopleName.innerHTML = Msg.profile.nickname;
            eventCount.innerHTML = Msg.profile.eventCount;
            focusNum.innerHTML = Msg.profile.follows;
            follow.innerHTML = Msg.profile.followeds;
            signature.innerHTML = Msg.profile.signature;

            ajax(listenList, 'GET', `/user/level?cookie=${cookie}`, function () {
                let listenListMsg = JSON.parse(listenList.response);
                console.log(listenListMsg);
                console.log('dsds');
            });
        });
        ajax(songRank, 'GET', `/record/recent/song?limit=10&cookie=${cookie}&t=${Date.now()}`, function () {
            let rank = JSON.parse(songRank.response);
            //将听歌排行的信息传入页面中
            for (let i = 0; i < 10; i++) {
                songRankLi[i].setAttribute('song-id', rank.data.list[i].data.id);
                songRankName[i].innerHTML = rank.data.list[i].data.al.name;
                singerRankName[i].innerHTML = rank.data.list[i].data.ar[0].name;

            }
            console.log(rank);

        });
        ajax(songRankList, 'GET', `/user/playlist?uid=${peopleId}&cookie=${cookie}&t=${Date.now()}`, function () {
            let songListRank = JSON.parse(songRankList.response);
            //先判断创建的歌单有几个(创建的歌单和收藏的歌单)
            let judgeListNum = 0;
            let judgeCollectList = 0;
            for (let i = 0; i < songListRank.playlist.length; i++) {
                if (songListRank.playlist[i].subscribed == false) {
                    //显示我创建的歌单是数量
                    judgeListNum++;
                } else {
                    //显示我收藏的歌单的数量
                    judgeCollectList++;
                }
            }
            ltsub.innerHTML = '（' + judgeListNum + ')';
            ltsub2.innerHTML = '（' + judgeCollectList + ')';
            console.log(judgeCollectList);
            //完善歌单信息的函数
            function refine(i, peopleList) {
                let Listli = document.createElement('li');
                peopleList.appendChild(Listli);
                Listli.setAttribute('list-id', songListRank.playlist[i].id);
                let Lidiv = document.createElement('div');
                Listli.appendChild(Lidiv);
                for (let j = 0; j < 5; j++) {
                    if (j == 0) {
                        let divImg = document.createElement('img');
                        Lidiv.appendChild(divImg);
                        divImg.classList.add('jpg');
                        divImg.src = songListRank.playlist[i].coverImgUrl;

                    }
                    if (j == 1) {
                        let divA = document.createElement('a');
                        Lidiv.appendChild(divA);
                        divA.innerHTML = songListRank.playlist[i].name;

                    }
                    if (j == 2) {
                        let divSpan = document.createElement('span');
                        Lidiv.appendChild(divSpan);
                        divSpan.classList.add('iconfont');
                        divSpan.classList.add('icon-bofang');

                    }
                    if (j == 3) {
                        let divSpanSecond = document.createElement('span');
                        Lidiv.appendChild(divSpanSecond);
                        divSpanSecond.classList.add('playnum');
                        if (songListRank.playlist[i].playCount >= 10000) {
                            divSpanSecond.innerHTML = Math.trunc(songListRank.playlist[i].playCount / 10000) + '万';
                        } else {
                            divSpanSecond.innerHTML = songListRank.playlist[i].playCount;

                        }

                    }
                    if (j == 4) {
                        let divSpanThird = document.createElement('span');
                        Lidiv.appendChild(divSpanThird);
                        divSpanThird.classList.add('hover-play');
                    }
                }
            }
            //在歌单ul内动态创建歌单元素（我创建的歌单）
            for (let i = 0; i < judgeListNum && i < 8; i++) {
                console.log('5050505050');
                let peopleList = ifSuccess.document.querySelector('.createlist .list-middle ul');
                refine(i, peopleList);
            }
            for (let i = judgeListNum; i < judgeCollectList && i < judgeListNum + 8; i++) {
                let peopleList = ifSuccess.document.querySelector('.createlist2 .list-middle ul');
                refine(i, peopleList);

            }
        });
        //http://localhost:3000
        let utime = new Date("2003-01-27");
        let uatime = utime.getTime();
        console.log(uatime);





    }
    //获取编辑个人资料的按钮元素
    let changepeople = ifSuccess.document.querySelector('.r-top div input');
    changepeople.addEventListener('click', function () {
        totalmiddle.classList.add('index');
        console.log('upupup');
        for (let i = 0; i < ifAll.length; i++) {
            ifAll[i].classList.add('index');
        }
        ifsuccess.classList.remove('otherpage-third');
        ifAll[3].classList.add('otherpage-four');

    })
    let selfmsgSrc = document.querySelector('.user-top .self-message');
    selfmsgSrc.addEventListener('click', function () {
        totalmiddle.classList.add('index');
        console.log('upupup');
        for (let i = 0; i < ifAll.length; i++) {
            ifAll[i].classList.add('index');
        }
        ifsuccess.classList.remove('otherpage-third');
        ifAll[3].classList.add('otherpage-four');

    });

    let ifchange = document.getElementById('ifperson').contentWindow;
    let year = ifchange.document.querySelector('.birthday .year');
    for (let i = 1920; i < 2023; i++) {
        let option = document.createElement('option');
        year.appendChild(option);
        option.value = i;
        option.innerHTML = i;
    }
    let mouth = ifchange.document.querySelector('.birthday .mouth');
    for (let i = 1; i < 13; i++) {
        let option = document.createElement('option');
        mouth.appendChild(option);
        if (i < 10) {
            option.value = '0' + i;
            option.innerHTML = '0' + i;
        } else {
            option.value = i;
            option.innerHTML = i;
        }


    }
    let day = ifchange.document.querySelector('.birthday .day');
    for (let i = 1; i < 32; i++) {
        let option = document.createElement('option');
        day.appendChild(option);
        if (i < 10) {
            option.value = '0' + i;
            option.innerHTML = '0' + i;
        } else {
            option.value = i;
            option.innerHTML = i;
        }


    }
    let area = ifchange.document.querySelector('.area');
    let province = ifchange.document.querySelector('#province');
    let cityG = ifchange.document.querySelector('#city-g');
    let cityH = ifchange.document.querySelector('#city-h');
    province.onchange = function () {
        let numcity = province.selectedIndex;
        console.log(numcity);
        if (numcity == 0) {
            cityG.style.display = 'block';
            cityH.style.display = 'none';
        }
        if (numcity == 1) {
            cityG.style.display = 'none';
            cityH.style.display = 'block';
        }
    }
    //更改成功的盒子
    let succuss = ifchange.document.querySelector('.main .success');

    //获取个人信息元素
    let genderBtn = ifchange.document.querySelectorAll('.sex div span input');
    let introduce = ifchange.document.querySelector('.introduce .introduce-text');
    let subitBtn = ifchange.document.querySelector('.self-bottom a');
    let nickname = ifchange.document.querySelector('.nickname .nickname-text');
    // 点击按钮之后获取到所有数据并且调用更新信息接口
    subitBtn.addEventListener('click', function () {
        let genderNum = null;
        let remsg = ifchange.document.querySelector('.self-bottom span');
        remsg.innerHTML = '';
        let birValue = year.options[year.selectedIndex].value + '-' + mouth.options[mouth.selectedIndex].value + '-' + day.options[day.selectedIndex].value;
        let date = new Date(birValue);
        let birtime = date.getTime();
        let selected = province.selectedIndex;
        let provinceValue = province.options[selected].value;
        let signature = introduce.value;
        let name = nickname.value;
        let city = null;
        console.log(signature);
        if (selected == 0) {
            city = cityG.options[cityG.selectedIndex].value;
        } else {
            city = cityH.options[cityH.selectedIndex].value;
        }
        for (let i = 0; i < genderBtn.length; i++) {
            if (genderBtn[i].checked) {
                genderNum = genderBtn[i].value;
            }
        }
        let gender = ifchange.document.querySelector('#city-h');
        let subitMsg = new XMLHttpRequest;
        //调用更改信息接口
        ajax(subitMsg, 'GET', `/user/update?gender=${genderNum}&signature=${signature}&city=${city}&nickname=${name}&birthday=${birtime}&province=${provinceValue}&cookie=${cookie}`, function () {
            let responseMsg = JSON.parse(subitMsg.response);
            if (responseMsg.code == 400) {
                remsg.innerHTML = responseMsg.message;
            } else {
                let a;
                if (a) {
                    clearTimeout(a);
                }
                succuss.style.display = 'block';
                a = setTimeout(function () {
                    succuss.style.display = 'none';
                }, 2000);
            }
        })
    })
    // 调用搜索的接口
    let search = new XMLHttpRequest;
    ajax(search, 'GET', `/search?keywords=海阔天空&t=${Date.now()}`, function () {
        console.log(JSON.parse(search.response));
    })

    function now() {

        //获取歌单页面li
        let commentSong = ifSong.document.querySelectorAll('.lb-song ul li');
        let commentSongId = commentSong[0].getAttribute('song-id');
        console.log(commentSongId);
        //let commentUl = document.createElement('ul');
        //comment.appendChild(commentUl);
        commentMsg(commentSongId, 0);
        like();

    }
    //获取页数盒子
    let brokePage = ifSong.document.querySelectorAll('.total .broke-page span');
    //定义调用评论信息
    function commentMsg(id, numb) {
        let comment = ifSong.document.querySelector('.total .comment');
        let Cmessage = new XMLHttpRequest;
        let commentUlbefore = ifSong.document.querySelector('.total .comment ul');
        if (commentUlbefore != null) {
            comment.removeChild(commentUlbefore);
        }
        ajax(Cmessage, 'GET', `/comment/music?id=${id}&limit=7&offset=${numb*7}&t=${Date.now()}`, function () {
            let co = JSON.parse(Cmessage.response);

            let commentUl = document.createElement('ul');
            comment.appendChild(commentUl);
            for (let j = 0; j < co.comments.length; j++) {
                //创建一个评论的整个li
                let commentLi = document.createElement('li');
                commentUl.appendChild(commentLi);
                commentLi.setAttribute('cid', co.comments[j].commentId)
                //创建li里面的左边图片盒子
                let commentLeft = document.createElement('div');
                commentLi.appendChild(commentLeft);
                console.log(commentLeft);
                commentLeft.classList.add('comment-left');
                //在右边盒子里面放上图片内容
                let commentLeftImg = document.createElement('img');
                commentLeft.appendChild(commentLeftImg);
                commentLeftImg.src = co.comments[j].user.avatarUrl;
                //创建li里面的右边评论内容盒子
                let commentRight = document.createElement('div');
                commentLi.appendChild(commentRight);
                commentRight.classList.add('comment-right');
                //创建li右边评论盒子里面的两个盒子
                let commentText = document.createElement('div');
                commentRight.appendChild(commentText);
                commentText.classList.add('contenttext');
                //text盒子里面的内容
                //写评论的名字
                let commentName = document.createElement('a');
                commentText.appendChild(commentName);
                commentName.classList.add('comment-name');
                commentName.innerHTML = co.comments[j].user.nickname + '：';
                commentText.innerHTML += commentName + co.comments[j].content;
                console.log(commentName);
                //时间盒子
                let subcontent = document.createElement('div');
                commentRight.appendChild(subcontent);
                subcontent.classList.add('subcontent');
                //创建两个盒子，一个是时间盒子一个是点赞盒子
                let contentTime = document.createElement('span');
                subcontent.appendChild(contentTime);
                contentTime.classList.add('comment-time');
                contentTime.innerHTML = co.comments[j].timeStr;
                let contentLike = document.createElement('span');
                subcontent.appendChild(contentLike);
                contentLike.classList.add('comment-like');
                contentLike.className = 'iconfont icon-dianzan';
                if (co.comments[j].liked == true) {
                    let commentLike = ifSong.document.querySelectorAll('.total .comment ul li .subcontent .icon-dianzan');
                    commentLike[i].setAttribute('like', 1);
                    commentLike[i].classList.add('like');
                }




            }
            like();
            console.log(co);
        });
        brokePage[0].classList.add('nowclick');

    }
    //点赞按钮
    function like() {
        let commentLike = ifSong.document.querySelectorAll('.total .comment ul li .subcontent .icon-dianzan');
        console.log(commentLike);
        let commentLikeLi = ifSong.document.querySelectorAll('.total .comment ul li');
        for (let i = 0; i < commentLike.length; i++) {
            commentLike[i].addEventListener('click', function () {
                console.log('sosososo');
                let likeAjax = new XMLHttpRequest;
                let lbClick = ifSong.document.querySelector('.lb-song ul .lb-click');
                let nowSongId = lbClick.getAttribute('song-id');
                let cid = commentLikeLi[i].getAttribute('cid');
                let selectLike = commentLike[i].getAttribute('like');
                console.log(selectLike);
                if (selectLike == null || selectLike == 0) {
                    commentLike[i].setAttribute('like', 1);
                    commentLike[i].classList.add('like');
                    ajax(likeAjax, 'GET', `/comment/like?id=${nowSongId}&cid=${cid}&t=1&type=0&cookie=${cookie}&time=${Date.now()}`, function () {
                        console.log(JSON.parse(likeAjax.response));
                    })
                } else {
                    commentLike[i].setAttribute('like', 0);
                    commentLike[i].classList.remove('like');
                    ajax(likeAjax, 'GET', `/comment/like?id=${nowSongId}&cid=${cid}&t=0&type=0&cookie=${cookie}&time=${Date.now()}`, function () {
                        console.log(JSON.parse(likeAjax.response));
                    });


                }
            })
        }
    }
    // 获取发表评论的按钮和文本框
    let commentShowText = ifSong.document.querySelector('.total .list .putcomment textarea');
    let commentShowBtn = ifSong.document.querySelector('.total .list .putcomment button');
    commentShowBtn.addEventListener('click', function () {
        let commentShowSpan = ifSong.document.querySelector('.total .list .putcomment span');
        commentShowSpan.style.display = 'none';
        console.log(commentShowText.value);
        if (commentShowText.value == '') {
            commentShowSpan.style.display = 'block';
        } else {
            commentShowSpan.style.display = 'none';
            //获取歌单页面li
            let commentSong = ifSong.document.querySelector('.lb-song ul .lb-click');
            let commentSongId = commentSong.getAttribute('song-id');
            let commentShow = new XMLHttpRequest;
            ajax(commentShow, 'GET', `/comment?t=1&type=0&id=${commentSongId}&content=${commentShowText.value}&cookie=${cookie}`, function () {
                let commentShowResponse = JSON.parse(commentShow.response);
                console.log(commentShowResponse);
                if (commentShowResponse.code == 200) {
                    let commentimer;
                    if (commentimer) {
                        clearTimeout(commentimer);
                    }
                    let commentSuccess = ifSong.document.querySelector('.total .list .putcomment .showsuccess');
                    commentSuccess.style.display = 'block';
                    commentimer = setTimeout(function () {
                        commentSuccess.style.display = 'none';
                        commentMsg(commentSongId, 0);
                    }, 1000);
                    commentShowText.value = '';

                }

            });
        }
    })
    //分页加载评论
    for (let i = 0; i < brokePage.length; i++) {
        brokePage[i].addEventListener('click', function () {
            let commentSong = ifSong.document.querySelector('.lb-song ul .lb-click');
            let commentSongId = commentSong.getAttribute('song-id');
            commentMsg(commentSongId, i);
            for (let j = 0; j < brokePage.length; j++) {
                brokePage[j].classList.remove('nowclick');
            }
            brokePage[i].classList.add('nowclick');

        })
    }
    // 改歌曲名字
    function subSongName() {
        let gsbUlSongname = document.querySelector('.gsb-left ul .change .left-songname');
        let subSNameSpan = document.querySelector('.gs-right .gsr-title');
        subSNameSpan.innerHTML = gsbUlSongname.innerHTML;

    }
    let ifsearch = document.getElementById('ifsearch').contentWindow;
    let smsText = ifsearch.document.querySelector('.smt-text');
    let searchSongList = ifsearch.document.querySelectorAll('.list-middle ul li');
    let searchSongName = ifsearch.document.querySelectorAll('.list-middle ul li .songname');
    let searchSonger = ifsearch.document.querySelectorAll('.list-middle ul li .singername');
    //获取搜索框的text
    let searchTop = document.querySelector('.m-search .searchbg .parent input');
    searchTop.onkeydown = function keydown(e) {
        if (searchTop.value == '') {
            console.log('dededede');
        } else if (e.code == 'Enter') {
            let smSsearchAjax = new XMLHttpRequest;
            let ifif = document.querySelectorAll('iframe');
            let totalmiddle = document.querySelector('.totalmiddle');
            for (let i = 0; i < ifif.length; i++) {
                ifif[i].className = 'index';
            }
            totalmiddle.className = 'totalmiddle index';
            ifif[4].className = 'other-search';
            smsText.value = searchTop.value;
            ajax(smSsearchAjax, 'GET', `/search?keywords=${smsText.value}`, function () {
                let songSearch = JSON.parse(smSsearchAjax.response);

                console.log(songSearch);
                for (let i = 0; i < searchSongList.length; i++) {
                    searchSongList[i].setAttribute('song-id', songSearch.result.songs[i].id);
                    searchSongName[i].innerHTML = songSearch.result.songs[i].name;
                    searchSonger[i].innerHTML = songSearch.result.songs[i].artists[0].name;

                }
            });
        }

    }
    smsText.onkeydown = function keydown(e) {
        if (searchTop.value == '') {
            console.log('dededede');
        } else if (e.code == 'Enter') {
            let smSsearchAjax = new XMLHttpRequest;
            let ifif = document.querySelectorAll('iframe');
            let totalmiddle = document.querySelector('.totalmiddle');
            for (let i = 0; i < ifif.length; i++) {
                ifif[i].className = 'index';
            }
            totalmiddle.className = 'totalmiddle index';
            ifif[4].className = 'other-search';
            searchTop.value = smsText.value;
            ajax(smSsearchAjax, 'GET', `/search?keywords=${smsText.value}`, function () {
                let songSearch = JSON.parse(smSsearchAjax.response);

                console.log(songSearch);
                for (let i = 0; i < searchSongList.length; i++) {
                    searchSongList[i].setAttribute('song-id', songSearch.result.songs[i].id);
                    searchSongName[i].innerHTML = songSearch.result.songs[i].name;
                    searchSonger[i].innerHTML = songSearch.result.songs[i].artists[0].name;

                }
            });
        }

    }
    let searchSongicon = ifsearch.document.querySelectorAll('.icon-weibiaoti--');
    let searchSongid = ifsearch.document.querySelectorAll('.list-middle ul li');
    for (let i = 0; i < searchSongicon.length; i++) {
        searchSongicon[i].addEventListener('click', function () {
            let lbsongId = searchSongid[i].getAttribute('song-id');


            console.log(songId);
            ajax(songMp3IdRequest, 'GET', `/song/detail?ids=${lbsongId}&t=${Date.now()}`, function () {
                let judge = 0;
                let song = JSON.parse(songMp3IdRequest.response);
                for (let i = 0; i < songId.length; i++) {
                    if (lbsongId == songId[i]) {
                        console.log('jijijwe');
                        judge = 1;
                        songPlayNumber = i;
                        playlay();

                        ajax(songSrc, 'GET', `/song/url?id=${id}&t=${Date.now()}`, songplay);

                    }
                }

                console.log(777777777);
                if (judge == 0) {
                    songId.push(`${lbsongId}`);
                    songPlayNumber = songId.length - 1;
                    console.log(songId);
                    ajax(songMp3IdRequest, 'GET', `/song/detail?ids=${lbsongId}&t=${Date.now()}`, function () {
                        let song = JSON.parse(songMp3IdRequest.response);
                        console.log(777777777);
                        //在黑色歌单里面再创建新的li元素，里面填入这首歌的信息
                        let subSongListLi = document.createElement('li');
                        subSongList.appendChild(subSongListLi);
                        subSongListLi.setAttribute('song-id', `${lbsongId}`);
                        for (let j = 0; j < 3; j++) {
                            let subSongListSpan = document.createElement('span');
                            subSongListLi.appendChild(subSongListSpan);
                            if (j == 0) {
                                subSongListSpan.classList.add('left-songname');
                                subSongListSpan.innerHTML = `${song.songs[0].name}`;
                            }
                            if (j == 1) {
                                subSongListSpan.classList.add('left-singer');
                                subSongListSpan.innerHTML = `${song.songs[0].ar[0].name}`;
                            }
                            if (j == 2) {
                                subSongListSpan.classList.add('left-time');
                                //歌曲时长的获取
                                let minute = Math.trunc(Math.trunc((song.songs[0].dt) / 1000) / 60);
                                let second = Math.trunc((song.songs[0].dt) / 1000) % 60;
                                if (minute >= 10) {
                                    minute = Math.trunc(Math.trunc((songMsg.songs[0].dt) / 1000) / 60);
                                } else {
                                    minute = '0' + minute;
                                }
                                if (second >= 10) {
                                    second = Math.trunc((song.songs[0].dt) / 1000) % 60;
                                } else {
                                    second = '0' + second;
                                }
                                subSongListSpan.innerHTML = `${minute}:${second}`;
                            }
                        }
                        playlay();
                        ajax(songSrc, 'GET', `/song/url?id=${lbsongId}&t=${Date.now()}`, songplay);
                    });
                }

            })

        })
    }







})